<template>
  <!--<div id="console"><div id="terminal-console"></div></div>-->
  <ContentWrap>
    <BaseButton type="success" @click="connect">开启连接</BaseButton>
    <BaseButton type="danger" @click="closeLog">关闭连接</BaseButton>
  </ContentWrap>
  <CodemirrorConsole :code="msg" :dark="true" :disabled="true" id="terminal-console" />
</template>

<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { BaseButton } from '@/components/Button'
import CodemirrorConsole from './codemirrorConsole.vue'
import { nextTick, reactive, ref, unref, onMounted } from 'vue'
const websocket = ref()
const msg = ref('')
onMounted(() => {
  init()
})
const init = () => {
  connect()
}
const closeLog = () => {
  websocket.value.close()
  msg.value += '通道已关闭....\n'
}
const connect = () => {
  websocket.value = new WebSocket('ws://127.0.0.1:8081/websocket/logger')
  msg.value += '通道连接中....\n'
  if (websocket.value != null) {
    websocket.value.open = function () {
      websocket.value.send('数据发送')
    }
    msg.value += '连接成功....\n'
    websocket.value.onmessage = function (event) {
      const content = JSON.parse(event.data)
      msg.value += content.timestamp + ' '
      msg.value += content.level
      msg.value += ' --- [' + content.threadName + ']'
      msg.value += ' ：' + content.body
      msg.value += content.exception
    }
  }
}
</script>

<style scoped>
#terminal-console {
  height: 570px;
  width: 95%;
  margin: 20px auto 0;
  line-height: 20px;
}
</style>
